<template>
  <div class="sales-analysis-screen" :class="{ 'fullscreen-mode': isFullscreen }" :style="screenStyle">
    <!-- 大屏标题 -->
    <div class="screen-header">
      <div class="header-decoration left"></div>
      <h1 class="screen-title">销售数据分析大屏</h1>
      <div class="header-decoration right"></div>
      <div class="header-controls">
        <FullscreenButton />
        <div class="current-time">{{ currentTime }}</div>
      </div>
    </div>

    <!-- 销售概览指标 -->
    <div class="sales-overview">
      <BorderBox type="1" class="overview-card">
        <DigitalFlop
          :value="salesMetrics.totalSales"
          title="总销售额"
          unit="万元"
          :fontSize="36"
          color="#ff6b6b"
          :precision="1"
        />
      </BorderBox>

      <BorderBox type="2" class="overview-card">
        <DigitalFlop
          :value="salesMetrics.todayOrders"
          title="今日订单"
          unit="单"
          :fontSize="36"
          color="#ff9500"
        />
      </BorderBox>

      <BorderBox type="3" class="overview-card">
        <DigitalFlop
          :value="salesMetrics.avgOrderValue"
          title="客单价"
          unit="元"
          :fontSize="36"
          color="#8b5cf6"
          :precision="0"
        />
      </BorderBox>

      <BorderBox type="1" class="overview-card">
        <WaterLevel
          :value="salesMetrics.targetCompletion"
          title="目标完成率"
          :size="100"
          :colors="['#ff6b6b', '#ff4757']"
        />
      </BorderBox>
    </div>

    <!-- 主要分析区域 -->
    <div class="analysis-main">
      <!-- 左侧：销售趋势 -->
      <div class="analysis-left">
        <BorderBox type="2" class="chart-box">
          <div class="chart-container">
            <h3 class="chart-title">销售趋势分析</h3>
            <div ref="salesTrendChart" class="chart-content"></div>
          </div>
        </BorderBox>
      </div>

      <!-- 右侧：产品销售排行 -->
      <div class="analysis-right">
        <BorderBox type="1" class="chart-box">
          <div class="chart-container">
            <h3 class="chart-title">产品销售排行</h3>
            <div ref="productRankChart" class="chart-content"></div>
          </div>
        </BorderBox>
      </div>
    </div>

    <!-- 底部区域 -->
    <div class="bottom-section">
      <!-- 左侧：销售漏斗 -->
      <div class="bottom-left">
        <BorderBox type="3" class="chart-box">
          <div class="chart-container">
            <h3 class="chart-title">销售转化漏斗</h3>
            <div ref="funnelChart" class="chart-content"></div>
          </div>
        </BorderBox>
      </div>

      <!-- 中间：地区销售 -->
      <div class="bottom-center">
        <BorderBox type="2" class="chart-box">
          <div class="chart-container">
            <h3 class="chart-title">地区销售分布</h3>
            <div ref="regionChart" class="chart-content"></div>
          </div>
        </BorderBox>
      </div>

      <!-- 右侧：实时销售数据 -->
      <div class="bottom-right">
        <BorderBox type="1" class="chart-box">
          <div class="table-container">
            <h3 class="chart-title">实时销售数据</h3>
            <ScrollBoard
              :data="realtimeSalesData"
              :headers="['时间', '商品', '金额', '地区']"
              :columnWidths="['25%', '35%', '20%', '20%']"
              :visibleRows="8"
              :rowHeight="26"
              :scrollSpeed="2500"
              :headerHeight="30"
            />
          </div>
        </BorderBox>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import BorderBox from './components/BorderBox.vue'
import DigitalFlop from './components/DigitalFlop.vue'
import WaterLevel from './components/WaterLevel.vue'
import ScrollBoard from './components/ScrollBoard.vue'
import FullscreenButton from './components/FullscreenButton.vue'
import { useScreenAdapter } from './utils/adapter'
import { addAnimationStyles } from './utils/animation'
import { useFullscreen } from './composables/useFullscreen'

// 全屏控制
const { isFullscreen } = useFullscreen()

// 大屏适配
const { scale } = useScreenAdapter()

// 计算屏幕样式
const screenStyle = computed(() => {
  if (isFullscreen.value) {
    return {
      // 全屏模式下不使用缩放，直接占满整个屏幕
      transform: 'none',
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      zIndex: 9999,
      padding: '20px',
      margin: '0',
      boxSizing: 'border-box'
    }
  } else {
    return {
      transform: 'scale(1)',
      width: '100%',
      height: 'auto',
      minHeight: '800px'
    }
  }
})

// 响应式数据
const currentTime = ref('')
const salesTrendChart = ref(null)
const productRankChart = ref(null)
const funnelChart = ref(null)
const regionChart = ref(null)
let salesTrendInstance = null
let productRankInstance = null
let funnelInstance = null
let regionInstance = null
let timeTimer = null

// 销售指标数据
const salesMetrics = ref({
  totalSales: 2856.7,
  todayOrders: 1567,
  avgOrderValue: 328,
  targetCompletion: 85.6
})

// 实时销售数据
const realtimeSalesData = ref([
  ['14:32:15', 'iPhone 15 Pro', '¥8,999', '北京'],
  ['14:31:48', '华为Mate60', '¥6,999', '上海'],
  ['14:31:22', '小米14 Ultra', '¥5,999', '深圳'],
  ['14:30:56', 'MacBook Pro', '¥15,999', '杭州'],
  ['14:30:33', 'iPad Air', '¥4,599', '广州'],
  ['14:30:11', 'AirPods Pro', '¥1,899', '成都'],
  ['14:29:45', '华为Watch GT', '¥1,688', '武汉'],
  ['14:29:18', '小米手环8', '¥299', '西安'],
  ['14:28:52', 'Surface Pro', '¥8,888', '南京'],
  ['14:28:26', 'Switch游戏机', '¥2,099', '重庆']
])

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 初始化销售趋势图表
const initSalesTrendChart = () => {
  if (!salesTrendChart.value) return

  salesTrendInstance = echarts.init(salesTrendChart.value)
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['销售额', '订单量'],
      textStyle: { color: '#ffffff' },
      top: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: { lineStyle: { color: '#ff6b6b' } },
      axisLabel: { color: '#ffffff' }
    },
    yAxis: [
      {
        type: 'value',
        name: '销售额(万)',
        position: 'left',
        axisLine: { lineStyle: { color: '#ff6b6b' } },
        axisLabel: { color: '#ffffff' },
        splitLine: { lineStyle: { color: 'rgba(255, 107, 107, 0.2)' } }
      },
      {
        type: 'value',
        name: '订单量',
        position: 'right',
        axisLine: { lineStyle: { color: '#ff9500' } },
        axisLabel: { color: '#ffffff' }
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'line',
        yAxisIndex: 0,
        data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
        smooth: true,
        lineStyle: { color: '#ff6b6b', width: 3 },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
              { offset: 1, color: 'rgba(255, 107, 107, 0)' }
            ]
          }
        }
      },
      {
        name: '订单量',
        type: 'bar',
        yAxisIndex: 1,
        data: [2600, 2800, 2200, 2900, 2100, 4200, 3800, 3300, 3500, 4100, 4800, 5200],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: '#ff9500' },
              { offset: 1, color: '#ff6b00' }
            ]
          }
        }
      }
    ]
  }
  
  salesTrendInstance.setOption(option)
}

// 初始化产品排行图表
const initProductRankChart = () => {
  if (!productRankChart.value) return

  productRankInstance = echarts.init(productRankChart.value)
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#ff6b6b' } },
      axisLabel: { color: '#ffffff' },
      splitLine: { lineStyle: { color: 'rgba(255, 107, 107, 0.2)' } }
    },
    yAxis: {
      type: 'category',
      data: ['其他', '游戏设备', '智能穿戴', '平板电脑', '笔记本', '智能手机'],
      axisLine: { lineStyle: { color: '#ff6b6b' } },
      axisLabel: { color: '#ffffff' }
    },
    series: [{
      name: '销售额',
      type: 'bar',
      data: [50, 120, 180, 280, 450, 680],
      itemStyle: {
        color: (params) => {
          const colors = ['#ff6b6b', '#ff9500', '#8b5cf6', '#00d4ff', '#00ff88', '#ffd93d']
          return colors[params.dataIndex % colors.length]
        }
      },
      emphasis: {
        itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' }
      },
      label: {
        show: true,
        position: 'right',
        color: '#ffffff',
        formatter: '{c}万'
      }
    }]
  }
  
  productRankInstance.setOption(option)
}

// 初始化销售漏斗图表
const initFunnelChart = () => {
  if (!funnelChart.value) return

  funnelInstance = echarts.init(funnelChart.value)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}% ({d}%)'
    },
    series: [{
      name: '销售转化',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        fontSize: 12
      },
      labelLine: {
        length: 10,
        lineStyle: { width: 1, type: 'solid' }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: { fontSize: 14 }
      },
      data: [
        { value: 100, name: '访问用户', itemStyle: { color: '#ff6b6b' } },
        { value: 80, name: '浏览商品', itemStyle: { color: '#ff9500' } },
        { value: 60, name: '加入购物车', itemStyle: { color: '#8b5cf6' } },
        { value: 40, name: '提交订单', itemStyle: { color: '#00d4ff' } },
        { value: 30, name: '完成支付', itemStyle: { color: '#00ff88' } }
      ]
    }]
  }

  funnelInstance.setOption(option)
}

// 初始化地区销售图表
const initRegionChart = () => {
  if (!regionChart.value) return

  regionInstance = echarts.init(regionChart.value)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}万元'
    },
    series: [{
      name: '地区销售',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 335, name: '华东地区', itemStyle: { color: '#ff6b6b' } },
        { value: 310, name: '华南地区', itemStyle: { color: '#ff9500' } },
        { value: 234, name: '华北地区', itemStyle: { color: '#8b5cf6' } },
        { value: 135, name: '西南地区', itemStyle: { color: '#00d4ff' } },
        { value: 148, name: '华中地区', itemStyle: { color: '#00ff88' } },
        { value: 98, name: '西北地区', itemStyle: { color: '#ffd93d' } },
        { value: 78, name: '东北地区', itemStyle: { color: '#ff69b4' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        color: '#ffffff',
        fontSize: 11
      },
      labelLine: {
        lineStyle: { color: '#ffffff' }
      }
    }]
  }

  regionInstance.setOption(option)
}

// 生命周期
onMounted(() => {
  addAnimationStyles()
  updateTime()
  timeTimer = setInterval(updateTime, 1000)

  setTimeout(() => {
    initSalesTrendChart()
    initProductRankChart()
    initFunnelChart()
    initRegionChart()
  }, 100)
})

onUnmounted(() => {
  if (timeTimer) clearInterval(timeTimer)
  if (salesTrendInstance) salesTrendInstance.dispose()
  if (productRankInstance) productRankInstance.dispose()
  if (funnelInstance) funnelInstance.dispose()
  if (regionInstance) regionInstance.dispose()
})
</script>

<style scoped>
.header-controls {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
}

.sales-analysis-screen {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #2d1b69 0%, #11998e 50%, #38ef7d 100%);
  color: #ffffff;
  font-family: 'Microsoft YaHei', sans-serif;
  transform-origin: 0 0;
  overflow: hidden;
  position: relative;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 全屏模式下完全占满屏幕 */
.sales-analysis-screen.fullscreen-mode {
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  padding: 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 全屏模式下调整各区域高度 - 使用相对高度 */
.sales-analysis-screen.fullscreen-mode .screen-header {
  height: 8vh !important;
  margin-bottom: 1.5vh !important;
  flex-shrink: 0 !important;
}

.sales-analysis-screen.fullscreen-mode .sales-overview {
  height: 18vh !important;
  margin-bottom: 1.5vh !important;
  flex-shrink: 0 !important;
}

.sales-analysis-screen.fullscreen-mode .analysis-main {
  height: 32vh !important;
  margin-bottom: 1.5vh !important;
  flex-shrink: 0 !important;
}

.sales-analysis-screen.fullscreen-mode .bottom-section {
  flex: 1 !important;
  margin-bottom: 0 !important;
  min-height: 35vh !important;
}

/* 全屏模式下确保无边距无滚动条 */
body.fullscreen-active,
html.fullscreen-active {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}

body.fullscreen-active * {
  box-sizing: border-box;
}

/* 普通模式下的调整 */
.sales-analysis-screen:not(.fullscreen-mode) .screen-header {
  height: 60px;
  margin-bottom: 10px;
}

.sales-analysis-screen:not(.fullscreen-mode) .screen-title {
  font-size: 28px;
}

.sales-analysis-screen:not(.fullscreen-mode) .sales-overview {
  margin-bottom: 15px;
}

.sales-analysis-screen:not(.fullscreen-mode) .analysis-main {
  margin-bottom: 15px;
}

.sales-analysis-screen:not(.fullscreen-mode) .bottom-section {
  margin-bottom: 0;
}

.sales-analysis-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 149, 0, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  position: relative;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.header-decoration {
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff6b6b, transparent);
}

.screen-title {
  font-size: 36px;
  font-weight: bold;
  margin: 0 40px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b6b, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}

.current-time {
  font-size: 18px;
  color: #ffffff !important;
  font-family: 'Monaco', monospace;
  background: rgba(255, 107, 107, 0.2);
  padding: 8px 16px;
  border: 1px solid rgba(255, 107, 107, 0.4);
  border-radius: 6px;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
}

.sales-overview {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 15px;
  flex-shrink: 0;
  height: 160px;
}

.overview-card {
  flex: 1;
}

.analysis-main {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 15px;
  flex: 1;
  min-height: 0;
}

.analysis-left {
  flex: 0 0 42%;
}

.analysis-right {
  flex: 0 0 56%;
}

.bottom-section {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-shrink: 0;
  height: 280px;
}

.bottom-left {
  flex: 0 0 32%;
}

.bottom-center {
  flex: 0 0 35%;
}

.bottom-right {
  flex: 0 0 31%;
}

.chart-box {
  width: 100% !important;
  height: 100% !important;
}

.overview-card {
  width: 100% !important;
  height: 100% !important;
}

.chart-container,
.table-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.sales-analysis-screen .chart-title,
.sales-analysis-screen h3.chart-title {
  font-size: 18px !important;
  color: #ff6b6b !important;
  margin: 0 0 15px 0 !important;
  text-align: center !important;
  font-weight: bold !important;
  flex-shrink: 0;
}

.chart-content {
  flex: 1;
  min-height: 0;
}

/* DigitalFlop组件标题样式强制覆盖 */
.overview-card .digital-title {
  font-size: 18px !important;
  color: #ffffff !important;
  font-weight: bold !important;
  margin-bottom: 8px !important;
}

.sales-analysis-screen.fullscreen-mode .overview-card .digital-title {
  font-size: 20px !important;
}

/* WaterLevel组件在销售分析页面中的样式调整 */
.sales-analysis-screen .overview-card .water-level {
  padding: 10px !important;
}

.sales-analysis-screen .overview-card .water-level-title {
  font-size: 14px !important;
  margin-bottom: 5px !important;
}

.sales-analysis-screen.fullscreen-mode .overview-card .water-level {
  padding: 8px !important;
}

.sales-analysis-screen.fullscreen-mode .overview-card .water-level-title {
  font-size: 16px !important;
  margin-bottom: 8px !important;
}

/* 响应式调整 */
@media (max-width: 1600px) {
  .sales-analysis-screen:not(.fullscreen-mode) .screen-title {
    font-size: 24px;
  }

  .sales-analysis-screen:not(.fullscreen-mode) .chart-title {
    font-size: 16px !important;
  }
}

@media (max-width: 1200px) {
  .sales-analysis-screen:not(.fullscreen-mode) .analysis-main {
    flex-direction: column;
  }

  .sales-analysis-screen:not(.fullscreen-mode) .analysis-left,
  .sales-analysis-screen:not(.fullscreen-mode) .analysis-right {
    flex: none;
  }

  .sales-analysis-screen:not(.fullscreen-mode) .bottom-section {
    flex-direction: column;
    height: auto;
  }

  .sales-analysis-screen:not(.fullscreen-mode) .bottom-left,
  .sales-analysis-screen:not(.fullscreen-mode) .bottom-center,
  .sales-analysis-screen:not(.fullscreen-mode) .bottom-right {
    flex: none;
    height: 280px;
  }
}
</style>
